<template>
	<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" label-width="auto"
	    class="demo-ruleForm" :size="formSize" status-icon>
		
		<el-form-item label="菜单图标" prop="MenuIcon" >
					<el-form style="margin-left: 35px;">
						<el-from-item lable="图标">
								<ElIconPicker v-model="ruleForm.MenuIcon"></ElIconPicker>
						</el-from-item>
					</el-form>	
		</el-form-item>	
		
		<el-form-item label="菜单次序" prop="MenuOrder">
			<el-input-number v-model="ruleForm.MenuOrder" :min="1" :max="10"></el-input-number>
		</el-form-item>	
	    <el-form-item label="菜单名称" prop="MenuName">
	    		<el-input v-model="ruleForm.MenuName" />
	    	</el-form-item>
	    	<el-form-item label="菜单Url" prop="MenuUrl">
	    		<el-input v-model="ruleForm.MenuUrl" />
	    	</el-form-item>
	    	<el-form-item label="父级菜单" prop="PId">
	    		<el-select v-model="ruleForm.PId" placeholder="请选择菜单">
	    			<el-option v-for="menu in parentMenu" :label="menu.MenuName" :value="menu.Id"></el-option>
					<el-option :value="0" label="父级"></el-option>
	    		</el-select>
	    	</el-form-item>
	    			
	    	<el-form-item label="是否显示" prop="IsShow">
	    		<el-select-v2 v-model="ruleForm.IsShow" placeholder="请选择" :options="optionsIsShow" />
	    	</el-form-item>	
	    
	    
	   <el-form-item label="菜单状态" prop="Status">
			<el-select-v2 v-model="ruleForm.Status" placeholder="请选择状态" :options="optionsStatus" />
	    </el-form-item>	
	
	    
	    <el-form-item>
	        <el-button type="primary" @click="submitForm(ruleFormRef)">
	            保存
	        </el-button>
	        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
	    </el-form-item>
	</el-form>
	
</template>

<script setup lang="ts">
	
	import { reactive, ref, onMounted } from 'vue'
	import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
	import { ElNotification } from 'element-plus'
	import ElIconPicker from '../../components/Icon.vue'	
	import menuApi from "../../api/menuinfoapi"
	const props = defineProps({
	    Id: Number,
	});
	const emit = defineEmits(['onSave'])
	const icon=ref<string>('');
	
	
	interface RuleForm {
	      MenuName: string
	      MenuUrl: string
	      MenuIcon: string
	      PId: number|null
	      IsShow: number|null
	      MenuOrder: string
	      Status: number|null	
	}
	
	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = ref<RuleForm>({
	        MenuName: '',
	        MenuUrl: '',
	        MenuIcon: icon.value,
	        PId: null,
	        IsShow: null,
			MenuOrder:'',
	        Status: null,
	
	})
	
	const parentMenu = ref<any>([])
	//查询一级菜单
	const getPId=()=>{
		menuApi.Menuone().then(res=>{
			parentMenu.value = res.data
			// PId.value=res.data;		
		}).catch(err=>{
			console.log(err);		
		})	
	}
	
	
	const getData = () => {
	    menuApi.get(props.Id!).then(res => {
	        console.log("aaa=", res.data);
	        ruleForm.value = res.data
	    })
	}
	onMounted(() => {
	    getData();
		getPId();
	})
	const optionsStatus = [
		{
			value: 1,
			label: "正常",
		},
		{
			value: 0,
			label: "删除",
		},
		{
			value: -1,
			label: "禁用",
		}
	]
	
	const optionsIsShow=[
		{
			value: 0,
			label: "否",
		},
		{
			value: 1,
			label: "是",
		},

	]
	
	
	const submitForm = async (formEl: FormInstance | undefined) => {
	    if (!formEl) return
	    await formEl.validate((valid, fields) => {
	        if (valid) {
	            console.log("ruleForm.data", ruleForm.value)
	
	            menuApi.put(ruleForm.value).then((res:any) => {
	                console.log("rws",res)
	                if (res.code == 1) {
	                    ElNotification({
	                        title: 'Success',
	                        message: '修改成功',
	                        type: 'success',
	                        duration: 800,
	                        onClose: () => {
	                            emit("onSave", true)
	                        }
	                    })
	                } else {
	                    ElNotification({
	                        title: 'Error',
	                        message: '失败',
	                        type: 'error',
	                        duration: 800,
	                    })
	                }
	            }).catch((err:any) => {
	                ElNotification({
	                    title: 'Error',
	                    message: '失败',
	                    type: 'error',
	                    duration: 800,
	                })
	                console.log("err",err)
	            })
	        } else {
	            console.log('error submit!', fields)
	        }
	    })
	}
	
	const resetForm = (formEl: FormInstance | undefined) => {
	    if (!formEl) return
	    formEl.resetFields()
	}
	
	
</script>

<style>
</style>